<section class="content">
    <header class="content__title">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">主页</li>
        </ol>
    </header>
    <div class="main-content" id="main-content">
        <div class="card-block">
            <div class="card">
                <div class="card-block">
                    <div class="table-responsive">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm">
                                    <div id="tiaoxing" style="min-width: 300px;height:400px"></div>
                                    <div id="wrapper">
                                        <button class="alert alert-success" id="plain">普通</button>
                                        <button class="alert alert-success" id="inverted">反转</button>
                                    </div>
                                </div>

                                <script type="text/javascript">
                                    var charttiaoxing = Highcharts.chart('tiaoxing', {
                                        lang:{
                                            contextButtonTitle:"图表导出菜单",
                                            decimalPoint:".",
                                            downloadJPEG:"下载JPEG图片",
                                            downloadPDF:"下载PDF文件",
                                            downloadPNG:"下载PNG文件",
                                            downloadSVG:"下载SVG文件",
                                            downloadXLS: '下载 XLS文件',
                                            drillUpText:"返回 {series.name}",
                                            loading:"加载中",
                                            noData:"没有数据",
                                            numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
                                            printChart:"打印图表",
                                            resetZoom:"恢复缩放",
                                            resetZoomTitle:"恢复图表",

                                        },
                                        title: {
                                            text: '信息程学院'
                                        },
                                        subtitle: {
                                            text: '软件专业'
                                        },
                                        xAxis: {
                                            categories: ['16软件1班', '16软件2班', '16软件3班', '16软件4班']

                                        },
                                        yAxis: {
                                            title: {
                                                text: '参加人数'
                                            }
                                        },
                                        series: [{
                                            type: 'column',
                                            colorByPoint: true,
                                            data: [29.9, 71.5, 106.4, 129.2],
                                            showInLegend: false
                                        }]
                                    });

                                    setTimeout(function(){
                                        charttiaoxing.update({
                                            series:{
                                                data: [23, 33, 33, 33],
                                            }
                                        });
                                    },3000);

                                    // 给 wrapper 添加点击事件
                                    Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
                                        var target = e.target,
                                            button = null;
                                        if(target.tagName === 'BUTTON') { // 判断点的是否是 button
                                            button = target.id;
                                            switch(button) {
                                                case 'plain':
                                                    charttiaoxing.update({
                                                        chart: {
                                                            inverted: false,
                                                            polar: false
                                                        }
                                                    });
                                                    break;
                                                case 'inverted':
                                                    charttiaoxing.update({
                                                        chart: {
                                                            inverted: true,
                                                            polar: false
                                                        }
                                                    });
                                                    break;
                                                case 'polar':
                                                    charttiaoxing.update({
                                                        chart: {
                                                            inverted: false,
                                                            polar: true
                                                        }
                                                    });
                                                    break;
                                            }
                                        }
                                    });

                                </script>




                                <div class="col-sm">
                                    <div id="que" style="min-width: 300px;height:400px"></div>

                                </div>

                                <script type="text/javascript">
                                    var chart = Highcharts.chart('que', {
                                        title: {
                                            text: '2018 ~ 2019年学生参与情况'
                                        },
                                        subtitle: {
                                            text: '数据来源：作业提交'
                                        },
                                        yAxis: {
                                            title: {
                                                text: '提交次数'
                                            }
                                        },
                                        xAxis: {

                                        },
                                        legend: {
                                            layout: 'vertical',
                                            align: 'right',
                                            verticalAlign: 'middle'
                                        },
                                        plotOptions: {

                                        },
                                        series: [{
                                            name: '17软件1班',
                                            data:(function () {
                                                // 生成随机值
                                                var data = [],
                                                    time = (new Date()).getTime(),
                                                    i;
                                                for (i = 12; i >=0; i-= 1) {
                                                    data.push(Math.floor(Math.random()*10+1) * 222,);
                                                }
                                                return data;
                                            }())
                                        }, {
                                            name: '17软件2班',
                                            data:(function () {
                                                // 生成随机值
                                                var data = [],
                                                    time = (new Date()).getTime(),
                                                    i;
                                                for (i = 12; i >=0; i-= 1) {
                                                    data.push(Math.floor(Math.random()*10+1) * 222,);
                                                }
                                                return data;
                                            }())
                                        }, {
                                            name: '17软件3班',
                                            data:(function () {
                                                // 生成随机值
                                                var data = [],
                                                    time = (new Date()).getTime(),
                                                    i;
                                                for (i = 12; i >=0; i-= 1) {
                                                    data.push(Math.floor(Math.random()*10+1) * 222,);
                                                }
                                                return data;
                                            }())
                                        }, {
                                            name: '17软件4班',
                                            data:(function () {
                                                // 生成随机值
                                                var data = [],
                                                    time = (new Date()).getTime(),
                                                    i;
                                                for (i = 12; i >=0; i-= 1) {
                                                    data.push(Math.floor(Math.random()*10+1) * 222,);
                                                }
                                                return data;
                                            }())
                                        }, {
                                            name: '18软件1班',
                                            data:(function () {
                                                // 生成随机值
                                                var data = [],
                                                    time = (new Date()).getTime(),
                                                    i;
                                                for (i = 12; i >=0; i-= 1) {
                                                    data.push(Math.floor(Math.random()*10+1) * 222,);
                                                }
                                                return data;
                                            }())
                                        }],
                                        responsive: {
                                            rules: [{
                                                condition: {
                                                    maxWidth: 500
                                                },
                                                chartOptions: {
                                                    legend: {
                                                        layout: 'horizontal',
                                                        align: 'center',
                                                        verticalAlign: 'bottom'
                                                    }
                                                }
                                            }]
                                        }

                                    });
                                    // setInterval(function(){
                                    //     chart.update({
                                    //         series: [{
                                    //             name: '安装，实施人员',
                                    //             data:(function () {
                                    //                 // 生成随机值
                                    //                 var data = [],
                                    //                     time = (new Date()).getTime(),
                                    //                     i;
                                    //                 for (i = 10; i >=0; i-= 1) {
                                    //                     data.push(Math.floor(Math.random()*10+1) * 222,);
                                    //                 }
                                    //                 return data;
                                    //             }())
                                    //         }, {
                                    //             name: '工人',
                                    //             data:(function () {
                                    //                 // 生成随机值
                                    //                 var data = [],
                                    //                     time = (new Date()).getTime(),
                                    //                     i;
                                    //                 for (i = 10; i >=0; i-= 1) {
                                    //                     data.push(Math.floor(Math.random()*10+1) * 222,);
                                    //                 }
                                    //                 return data;
                                    //             }())
                                    //         }, {
                                    //             name: '销售',
                                    //             data:(function () {
                                    //                 // 生成随机值
                                    //                 var data = [],
                                    //                     time = (new Date()).getTime(),
                                    //                     i;
                                    //                 for (i = 10; i >=0; i-= 1) {
                                    //                     data.push(Math.floor(Math.random()*10+1) * 222,);
                                    //                 }
                                    //                 return data;
                                    //             }())
                                    //         }, {
                                    //             name: '项目开发',
                                    //             data:(function () {
                                    //                 // 生成随机值
                                    //                 var data = [],
                                    //                     time = (new Date()).getTime(),
                                    //                     i;
                                    //                 for (i = 10; i >=0; i-= 1) {
                                    //                     data.push(Math.floor(Math.random()*10+1) * 222,);
                                    //                 }
                                    //                 return data;
                                    //             }())
                                    //         }, {
                                    //             name: '其他',
                                    //             data:(function () {
                                    //                 // 生成随机值
                                    //                 var data = [],
                                    //                     time = (new Date()).getTime(),
                                    //                     i;
                                    //                 for (i = 10; i >=0; i-= 1) {
                                    //                     data.push(Math.floor(Math.random()*10+1) * 222,);
                                    //                 }
                                    //                 return data;
                                    //             }())
                                    //         }]
                                    //     });
                                    // },3000);
                                </script>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-th-include="common/footer"></div>
</section>